Authentication is an essential part of many Flutter applications. A practical authentication interface allows users to register, log in, log out, reset passwords, and safely interact with authenticated areas of an application.
In this module, we will build a practical authentication UI using Flutter widgets such as Form, TextFormField, FilledButton, Checkbox, Card, and Navigator. Flutter's Form and TextFormField provide built-in support for grouping fields and validating user input. Flutter Form Validation Documentation
An authentication interface is the collection of screens and controls that allow users to identify themselves and access protected application features.
A typical authentication system may contain:
A practical authentication interface can be organized as follows:
Authentication
├── Login
│ ├── Email
│ ├── Password
│ ├── Remember Me
│ ├── Forgot Password
│ └── Login Button
├── Registration
│ ├── Full Name
│ ├── Email
│ ├── Phone
│ ├── Password
│ ├── Confirm Password
│ ├── Terms & Conditions
│ └── Register Button
├── Forgot Password
│ └── Email
└── Home
└── Logout| Widget | Purpose |
|---|---|
Form | Groups multiple form fields and provides validation, saving, and resetting functionality. |
TextFormField | Creates text input fields that can participate in form validation. |
TextEditingController | Reads and controls the text entered into a field. |
FilledButton | Creates a prominent action button such as Login or Register. |
TextButton | Useful for secondary actions such as Forgot Password. |
Checkbox | Used for Remember Me or Terms and Conditions. |
Card | Can be used to visually contain authentication forms. |
Navigator | Moves the user between Login, Register, Forgot Password, and Home screens. |
SingleChildScrollView | Helps prevent content overflow when the keyboard is displayed or on smaller screens. |
TextFormField integrates a text field with Flutter's form system and supports validation through the validator property. Flutter Text Input Documentation
flutter create authentication_app
cd authentication_app
flutter runThe project can then be opened in Android Studio, Visual Studio Code, or another supported development environment.
The following example creates a simple authentication screen containing email and password fields.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Authentication App',
home: const LoginScreen(),
);
}
}
class LoginScreen extends StatefulWidget {
const LoginScreen({super.key});
@override
State createState() => _LoginScreenState();
}
class _LoginScreenState extends State {
final _formKey = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Login'),
),
body: Padding(
padding: const EdgeInsets.all(20),
child: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
decoration: const InputDecoration(
labelText: 'Email',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 16),
TextFormField(
obscureText: true,
decoration: const InputDecoration(
labelText: 'Password',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 20),
FilledButton(
onPressed: () {},
child: const Text('Login'),
),
],
),
),
),
);
}
}
A professional login interface should generally contain:
Welcome Back!
Sign in to continue
[ Email Address ]
[ Password ] 👁
☐ Remember Me Forgot Password?
[ LOGIN ]
Don't have an account?
Create an account
Email input should accept a valid email address and display a useful error message when the field is empty or incorrectly formatted.
TextFormField(
keyboardType: TextInputType.emailAddress,
decoration: const InputDecoration(
labelText: 'Email Address',
hintText: 'Enter your email',
prefixIcon: Icon(Icons.email_outlined),
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || value.trim().isEmpty) {
return 'Please enter your email';
}
if (!value.contains('@')) {
return 'Please enter a valid email';
}
return null;
},
)
Password fields should hide sensitive text using obscureText.
TextFormField(
obscureText: true,
decoration: const InputDecoration(
labelText: 'Password',
hintText: 'Enter your password',
prefixIcon: Icon(Icons.lock_outline),
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your password';
}
if (value.length < 6) {
return 'Password must contain at least 6 characters';
}
return null;
},
)
A password visibility button improves usability by allowing users to temporarily view the password they entered.
bool _obscurePassword = true;
TextFormField(
obscureText: _obscurePassword,
decoration: InputDecoration(
labelText: 'Password',
prefixIcon: const Icon(Icons.lock_outline),
suffixIcon: IconButton(
icon: Icon(
_obscurePassword
? Icons.visibility
: Icons.visibility_off,
),
onPressed: () {
setState(() {
_obscurePassword = !_obscurePassword;
});
},
),
border: const OutlineInputBorder(),
),
)
Flutter provides a structured approach to form validation. A common pattern is to create a GlobalKey, attach it to a Form, and call validate() when the user submits the form. Each validator returns an error message when invalid and null when valid. Official Form Validation Guide
final _formKey = GlobalKey();
Form(
key: _formKey,
child: Column(
children: [
TextFormField(
validator: (value) {
if (value == null || value.isEmpty) {
return 'Required field';
}
return null;
},
),
FilledButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
print('Form is valid');
}
},
child: const Text('Submit'),
),
],
),
)
final _formKey = GlobalKey();
void _login() {
if (_formKey.currentState!.validate()) {
print('Login request can be submitted');
}
}
When the user presses Login:
validate().bool rememberMe = false;
CheckboxListTile(
value: rememberMe,
title: const Text('Remember Me'),
controlAffinity: ListTileControlAffinity.leading,
onChanged: (value) {
setState(() {
rememberMe = value ?? false;
});
},
)
The checkbox controls a UI preference. Actual persistent login behavior should be implemented using an appropriate authentication and secure storage strategy rather than relying only on the checkbox value.
The Forgot Password screen normally asks the user for an email address and provides a button to request a password-reset process.
class ForgotPasswordScreen extends StatelessWidget {
const ForgotPasswordScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Forgot Password'),
),
body: Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const Text(
'Enter your email address to reset your password.',
),
const SizedBox(height: 20),
TextFormField(
keyboardType: TextInputType.emailAddress,
decoration: const InputDecoration(
labelText: 'Email Address',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 20),
FilledButton(
onPressed: () {},
child: const Text('Send Reset Link'),
),
],
),
),
);
}
}
A registration screen generally collects more information than a login screen.
Common fields include:
TextFormField(
textCapitalization: TextCapitalization.words,
decoration: const InputDecoration(
labelText: 'Full Name',
prefixIcon: Icon(Icons.person_outline),
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || value.trim().isEmpty) {
return 'Please enter your full name';
}
return null;
},
)
TextFormField(
keyboardType: TextInputType.phone,
decoration: const InputDecoration(
labelText: 'Phone Number',
prefixIcon: Icon(Icons.phone_outlined),
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || value.trim().isEmpty) {
return 'Please enter your phone number';
}
return null;
},
)
The confirm-password field should match the original password.
final passwordController = TextEditingController();
TextFormField(
controller: passwordController,
obscureText: true,
decoration: const InputDecoration(
labelText: 'Password',
border: OutlineInputBorder(),
),
)
TextFormField(
obscureText: true,
decoration: const InputDecoration(
labelText: 'Confirm Password',
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please confirm your password';
}
if (value != passwordController.text) {
return 'Passwords do not match';
}
return null;
},
)
When a TextEditingController is used in a stateful widget, it should be disposed when it is no longer needed. Flutter TextEditingController Guide
bool acceptedTerms = false;
CheckboxListTile(
value: acceptedTerms,
title: const Text(
'I agree to the Terms and Conditions',
),
controlAffinity: ListTileControlAffinity.leading,
onChanged: (value) {
setState(() {
acceptedTerms = value ?? false;
});
},
)
Before registration, the application can check whether the user has accepted the required terms.
void registerUser() {
if (!_formKey.currentState!.validate()) {
return;
}
if (!acceptedTerms) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Please accept the Terms and Conditions'),
),
);
return;
}
print('Registration can be submitted');
}
Instead of repeating the same decoration and styling for every field, create a reusable widget.
class AuthTextField extends StatelessWidget {
final String label;
final String hint;
final IconData icon;
final bool obscureText;
final TextInputType keyboardType;
final String? Function(String?)? validator;
const AuthTextField({
super.key,
required this.label,
required this.hint,
required this.icon,
this.obscureText = false,
this.keyboardType = TextInputType.text,
this.validator,
});
@override
Widget build(BuildContext context) {
return TextFormField(
obscureText: obscureText,
keyboardType: keyboardType,
validator: validator,
decoration: InputDecoration(
labelText: label,
hintText: hint,
prefixIcon: Icon(icon),
border: const OutlineInputBorder(),
),
);
}
}
AuthTextField(
label: 'Email',
hint: 'Enter your email',
icon: Icons.email_outlined,
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Enter your email';
}
return null;
},
)class AuthButton extends StatelessWidget {
final String text;
final VoidCallback? onPressed;
const AuthButton({
super.key,
required this.text,
required this.onPressed,
});
@override
Widget build(BuildContext context) {
return SizedBox(
width: double.infinity,
height: 52,
child: FilledButton(
onPressed: onPressed,
child: Text(text),
),
);
}
}
FilledButton is designed for prominent actions and can be styled using ButtonStyle or theme configuration. Flutter FilledButton API
Authentication interfaces commonly require navigation between Login, Registration, Forgot Password, and Home screens. Flutter's Navigator.push() can add a new route, while Navigator.pop() can return to the previous route. Flutter Navigation Guide
TextButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const RegisterScreen(),
),
);
},
child: const Text('Create an account'),
)TextButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const ForgotPasswordScreen(),
),
);
},
child: const Text('Forgot Password?'),
)import 'package:flutter/material.dart';
class LoginScreen extends StatefulWidget {
const LoginScreen({super.key});
@override
State createState() => _LoginScreenState();
}
class _LoginScreenState extends State {
final _formKey = GlobalKey();
final emailController = TextEditingController();
final passwordController = TextEditingController();
bool obscurePassword = true;
bool rememberMe = false;
bool isLoading = false;
@override
void dispose() {
emailController.dispose();
passwordController.dispose();
super.dispose();
}
void login() {
if (!_formKey.currentState!.validate()) {
return;
}
setState(() {
isLoading = true;
});
Future.delayed(const Duration(seconds: 2), () {
if (!mounted) return;
setState(() {
isLoading = false;
});
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Login request submitted'),
),
);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(height: 40),
const Icon(
Icons.lock_outline,
size: 70,
),
const SizedBox(height: 20),
const Text(
'Welcome Back!',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
const Text(
'Sign in to continue',
textAlign: TextAlign.center,
),
const SizedBox(height: 32),
TextFormField(
controller: emailController,
keyboardType: TextInputType.emailAddress,
decoration: const InputDecoration(
labelText: 'Email Address',
prefixIcon: Icon(Icons.email_outlined),
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || value.trim().isEmpty) {
return 'Please enter your email';
}
if (!value.contains('@')) {
return 'Please enter a valid email';
}
return null;
},
),
const SizedBox(height: 16),
TextFormField(
controller: passwordController,
obscureText: obscurePassword,
decoration: InputDecoration(
labelText: 'Password',
prefixIcon: const Icon(Icons.lock_outline),
suffixIcon: IconButton(
icon: Icon(
obscurePassword
? Icons.visibility
: Icons.visibility_off,
),
onPressed: () {
setState(() {
obscurePassword = !obscurePassword;
});
},
),
border: const OutlineInputBorder(),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your password';
}
return null;
},
),
const SizedBox(height: 8),
Row(
children: [
Expanded(
child: CheckboxListTile(
contentPadding: EdgeInsets.zero,
value: rememberMe,
title: const Text('Remember Me'),
controlAffinity:
ListTileControlAffinity.leading,
onChanged: (value) {
setState(() {
rememberMe = value ?? false;
});
},
),
),
TextButton(
onPressed: () {},
child: const Text('Forgot Password?'),
),
],
),
const SizedBox(height: 16),
SizedBox(
height: 52,
child: FilledButton(
onPressed: isLoading ? null : login,
child: isLoading
? const SizedBox(
height: 22,
width: 22,
child: CircularProgressIndicator(),
)
: const Text('Login'),
),
),
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text("Don't have an account?"),
TextButton(
onPressed: () {},
child: const Text('Register'),
),
],
),
],
),
),
),
),
);
}
}
A loading state prevents the user from repeatedly pressing the Login or Register button while an authentication request is being processed.
bool isLoading = false;
FilledButton(
onPressed: isLoading ? null : login,
child: isLoading
? const SizedBox(
height: 20,
width: 20,
child: CircularProgressIndicator(),
)
: const Text('Login'),
)
User taps Login
↓
Validate form
↓
Set isLoading = true
↓
Send authentication request
↓
Receive response
↓
Success → Open Home
Failure → Show error
↓
Set isLoading = falseAuthentication failures should be communicated clearly without exposing sensitive implementation details.
void showLoginError(String message) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(message),
),
);
}showLoginError(
'Unable to sign in. Please check your credentials and try again.',
);The UI should not contain all authentication logic. A better application architecture separates the interface from authentication services.
lib/
├── main.dart
├── screens/
│ ├── login_screen.dart
│ ├── register_screen.dart
│ ├── forgot_password_screen.dart
│ └── home_screen.dart
├── widgets/
│ ├── auth_text_field.dart
│ └── auth_button.dart
├── services/
│ └── auth_service.dart
└── models/
└── user_model.dartclass AuthService {
Future login(
String email,
String password,
) async {
// Send credentials to the authentication backend.
return true;
}
Future register(
String name,
String email,
String password,
) async {
// Send registration data to the backend.
return true;
}
Future logout() async {
// Clear the authenticated session.
}
}
This is a structural example only. A production application should connect the service to a real authentication provider or backend and handle network errors, sessions, token expiry, and secure credential handling appropriately.
LoginScreen
↓
Form Validation
↓
AuthService
↓
Authentication Backend
↓
Success / Failure
↓
HomeScreen or Error MessageThis separation makes the application easier to maintain and test.
Authentication screens should work on small phones, large phones, tablets, and other supported screen sizes.
Useful techniques include:
SafeArea for content near system UI.SingleChildScrollView to avoid keyboard-related overflow.ConstrainedBox for large screens when appropriate.Center(
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 450,
),
child: Padding(
padding: const EdgeInsets.all(24),
child: LoginForm(),
),
),
)Card(
elevation: 4,
child: Padding(
padding: const EdgeInsets.all(24),
child: Form(
key: _formKey,
child: Column(
children: [
const Text(
'Login',
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 20),
TextFormField(),
const SizedBox(height: 16),
TextFormField(
obscureText: true,
),
const SizedBox(height: 20),
FilledButton(
onPressed: login,
child: const Text('Login'),
),
],
),
),
),
)Some applications provide additional authentication methods such as Google, Apple, or other identity providers. The UI can be represented with secondary buttons.
OutlinedButton.icon(
onPressed: () {
// Start the configured social authentication flow.
},
icon: const Icon(Icons.login),
label: const Text('Continue with Google'),
)The button alone does not implement social authentication. A real provider integration and appropriate authentication configuration are required.
Row(
children: [
const Expanded(child: Divider()),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12),
child: Text(
'OR',
style: Theme.of(context).textTheme.bodySmall,
),
),
const Expanded(child: Divider()),
],
)Application Start
↓
Check Authentication State
↓
Authenticated?
↙ ↘
Yes No
↓ ↓
Home Login
↓
┌───────┴────────┐
↓ ↓
Register Forgot Password
↓ ↓
Create Account Reset Process
↓
Login
↓
Authentication
↓
Home
↓
Logout
↓
LoginTextEditingController objects.Form and TextFormField for structured form validation.A practical authentication interface should also be accessible.
Create an authentication application with the following screens:
authentication_app/
├── lib/
│ ├── main.dart
│ ├── screens/
│ │ ├── splash_screen.dart
│ │ ├── login_screen.dart
│ │ ├── register_screen.dart
│ │ ├── forgot_password_screen.dart
│ │ └── home_screen.dart
│ ├── widgets/
│ │ ├── auth_button.dart
│ │ ├── auth_text_field.dart
│ │ └── auth_header.dart
│ ├── services/
│ │ └── auth_service.dart
│ └── models/
│ └── user_model.dart
├── pubspec.yaml
└── README.md| Feature | Completed |
|---|---|
| Login Screen | ☐ |
| Registration Screen | ☐ |
| Email Validation | ☐ |
| Password Validation | ☐ |
| Confirm Password | ☐ |
| Password Visibility | ☐ |
| Forgot Password | ☐ |
| Remember Me | ☐ |
| Loading State | ☐ |
| Error Handling | ☐ |
| Responsive Layout | ☐ |
| Logout | ☐ |
Authentication is the process of verifying the identity of a user before allowing access to protected application functionality.
TextField provides general text input, while TextFormField integrates a text field with Flutter's Form and validation system.
FormState provides operations such as validating, saving, and resetting the fields contained within a form.
obscureText hides password characters while the user enters sensitive information.
A TextEditingController allows an application to read, modify, and monitor the current text of an input field.
It helps authentication forms remain accessible when the available vertical space becomes limited, such as when the on-screen keyboard appears.
Separating authentication logic from UI improves code organization, maintainability, testing, and reuse.
Form groups and manages form fields.TextFormField supports form-based input and validation.GlobalKey can be used to access the form state.validator is used to validate user input.TextEditingController provides access to entered text.obscureText hides password input.FilledButton can be used for important authentication actions.Navigator handles basic screen navigation.SingleChildScrollView helps prevent layout overflow.For additional Flutter learning and course information, visit the following resources:
Building a practical authentication interface in Flutter involves more than creating Login and Registration screens. A complete interface should provide structured forms, validation, password visibility controls, loading states, error handling, navigation, responsive layouts, and a clean separation between UI and authentication services.
For real-world applications, the Flutter interface should be connected to a properly configured authentication backend or identity provider. Client-side validation improves user experience, but server-side validation and secure authentication mechanisms remain essential.
